<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item title="综合" disabled />
      <van-dropdown-item title="价格" v-model="priceVal" :options="priceArr" @change="priceChange" />
      <van-dropdown-item title="分类" v-model="categoryVal" :options="filterCategory" @change="categoryChange" />
    </van-dropdown-menu>
    <van-empty v-if="goodsList.length == 0" image="search" description="您搜索的产品不存在" />
    <Product v-else :goodsList="goodsList" />
  </div>
</template>

<script>
import Product from '../Product.vue'
export default {
  name: "MyProduct",
  components: {
    Product
  },
  props: ['filterCategory', 'goodsList'],
  data() {
    return {
      // 价格下拉菜单的当前项
      priceVal: 0,
      // 分类下拉菜单的当前项
      categoryVal: 0,
      // 价格下拉菜单的列表
      priceArr: [
        { text: "价格由高到低", value: "desc" },
        { text: "价格由低到高", value: "asc" },
      ]
    }
  },
  methods: {
    categoryChange(value) {
      // 把value子传父到MyPopup中
      this.$emit('categoryChange', value)
    },
    priceChange(value) {
      // 把value子传父到MyPopup中
      this.$emit('priceChange', value)
    }
  },
  mounted() {
    // 根据这个数组中的某一项是否checked为true，来决定categoryVal的值
    this.filterCategory.map(val => {
      if (val.checked) {
        this.categoryVal = val.value
      }
    })
  }
};
</script>

<style>
</style>